<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1_el的三种写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <p><span>{{ message }}</span></p>
    </div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    // 第一种写法 CSS选择器
    // const vm = new Vue({
    //   el: "#app",
    //   data: { message: "Hello" },
    // });

    // 第二中写法 document.getElementById()
    // vm = new Vue({
    //   el: document.getElementById("app"),
    //   data: { message: "Hello" },
    // });

    // 第三种写法 $mount
    vm = new Vue({
      data: { message: "Hello" },
    });

    vm.$mount("#app");
  </script>
</html>
